import { useEffect } from 'react';

import { BrowserRouter } from 'react-router-dom';

import { subscribeSocket, unSubscribeSocket } from 'socketApi';
import Navbar from "./components/Navbar";
import AppRouter from 'components/AppRouter';

const App = () => {
  useEffect(
    () => {
      subscribeSocket();

      return unSubscribeSocket;
    },
    [],
  );
  
  return (
    <BrowserRouter>
      <div className="container mx-auto px-4">
        <Navbar />
        <AppRouter />
      </div>
    </BrowserRouter>
  );
};

export default App;
